<template>
	<view>
		<view class="d-flex flex-column a-center j-center py-5 my-3">
			<text class="text-light-muted font-md mb-2">支付金额</text>
			<price priceSize="font-lg" unitSize="font-md">2999.00</price>
		</view>
		<view class="px-5">
			<uni-list>
				<label>
					<uni-list-item title="支付宝" note="推荐使用支付宝支付" :clickable="true" @click="changeMethod('zfb')">
						<template slot="header">
							<view class="iconfont icon-zhifubao flex-shrink rounded-circle mr-2 d-flex a-center j-center font-lg text-primary"
							style="height: 100rpx;width: 100rpx;"></view>
						</template>
						<template slot="footer">
							<view class="d-flex a-center">
								<radio :checked="this.selectMethod['zfb']" value="zfb" color="#FD6801"></radio>
							</view>
						</template>
					</uni-list-item>
				</label>
				<label>
					<uni-list-item title="微信" :clickable="true" @click="changeMethod('wx')">
						<template slot="header">
							<view class="iconfont icon-weixinzhifu flex-shrink rounded-circle mr-2 d-flex a-center j-center font-lg text-success"
							style="height: 100rpx;width: 100rpx;"></view>
						</template>
						<view slot="footer" class="d-flex a-center">
							<radio :checked="this.selectMethod['wx']" value="wx" color="#FD6801"></radio>
						</view>
					</uni-list-item>
				</label>
			</uni-list>
			<view class="main-bg-color text-white font-md w-100 py-2 rounded mt-3 text-center"
			hover-class="main-bg-hover-color"
			@click="submit">确认支付</view>
		</view>
	</view>
</template>

<script>
	import price from "@/components/common/price.vue"
	import uniList from "@/components/uni-ui/uni-list/uni-list.vue"
	import uniListItem from "@/components/uni-ui/uni-list-item/uni-list-item.vue"
	
	export default {
		components: {
			price,
			uniList,
			uniListItem,
		},
		
		data() {
			return {
				selectMethod: {
					zfb: true,
					wx: false
				}
			}
		},
		
		computed: {
			
		},
		
		methods: {
			//确认支付
			submit() {
				uni.navigateTo({
					url: '../pay-result/pay-result'
				});
			},
			
			changeMethod(name) {
				if (!this.selectMethod[name]) {
					for(let key in this.selectMethod) {
						this.selectMethod[key] = key === name ? true : false
					}
				}
			}
		}
	}
</script>

<style>

</style>
